<template>
    <div id="form">
        <div class="title">
            <p>个人信息录入</p>
        </div>
        <form class="RegisterForm" @submit.prevent="submit">
            <div class="FormDiv">
                <div class="FormsuaDiv">
                    <ul class="guestIn">
                        <li>
                            <label>
                                <span>手机号</span>
                                <input type="tel" v-on:blur="callQuery(model.mobile)" placeholder="请填写" max-length="15" min-length="11" name="mobile" id="telphone" v-model="model.mobile">
                            </label>
                        </li>
                    </ul>
                    <div class="guestInfo">
                        <ul>
                            <li>
                                <label>
                                    <span> 姓&nbsp;&nbsp;&nbsp;名</span>
                                    <input type="text" placeholder="请填写" maxlength="8" class="guestName" name="name" v-model="model.name">
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span>性&nbsp;&nbsp;&nbsp;别</span>
                                    <select name="gender" v-model="model.gender">
                                        <option value="1">女</option>
                                        <option value="2">男</option>
                                        <!--option value="其他事项 ">其他事项</option>-->
                                    </select>
                                    <a class="icon"></a>
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span> 门&nbsp;&nbsp;&nbsp;店</span>
                                    <input type="text" placeholder="请填写" maxlength="8" class="guestName" name="store" v-model="model.store">
                                </label>
                            </li>
                            <li>
                                <label>
                                    <span> 备&nbsp;&nbsp;&nbsp;注</span>
                                    <textarea type="textarea" style='max-height: 15rem; resize: none' row=6 placeholder="请填写" id="remark" name="remark" v-model="model.remark"></textarea>
                                </label>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="pho">
                <ImagesFile ref="imageUrl" v-bind:dataArray="model.imgUrl" v-model="model.imgUrl"></ImagesFile>
            </div>

            <div class="sumbitBtn">
                <button class="default" type="sumbit">提交</button>
            </div>

        </form>

    </div>
</template>

<script>
import ImagesFile from "@/components/Admin/ImagesFile.vue"

export default {
    components: { ImagesFile },
    name: 'form',
    data() {
        return {

            contents: "",
            model: {
                gender: '1',
                remark: '',
                name: '',
                mobile: '',
                store: '',
                imgUrl: "",
            },
            userinfo: [],
        }
    },
    methods: {
        submit: function(event) {
            if (!this.model.mobile) {
                this.$ddapi.toast('请输入手机号 ！');
                return;
            }
            if (!this.model.name) {
                this.$ddapi.toast('请输入姓名 ！');
                return;
            }
            if (!this.model.gender) {
                this.$ddapi.toast('请输入性别 ！');
                return;
            }

            if (!this.model.store) {
                this.$ddapi.toast('请输入门店名称 ！');
                return;
            }
            if (!this.model.remark) {
                this.$ddapi.toast('请输入备注 ！');
                return;
            }

            this.model.imgUrl = JSON.stringify(this.$refs.imageUrl.imageList);

            if (!this.model.imgUrl) {
                this.$ddapi.toast('请上传图片 ！');
                return;
            }
            this.$http.post('/api/member/save', this.model).then(res => {
                this.model = res.body
                this.$router.back();
            }, error => {
                this.$ddapi.toast(error.body);
            })
        },
        callQuery: function(mobile) {
            this.$http.get('/api/member/getMemberByMobile?mobile=' + mobile).then(res => {
                if (!res.body) {
                    return;
                }
                this.model = res.body;
            })
        }
    },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ddd {
    height: 400px;
}

.outer {
    background: #fff;
}

.remark {

    margin: 0 3rem;
    display: -webkit-box;
    border-bottom: 1px solid #f5f5f5;
}

.remark_text {
    margin-right: 25%;
    line-height: 4.4rem;
    font-size: 1.5rem;
}

.inputDiv {
    font-size: 1.3rem;
}

.title p {
    color: #BAB8B8;
    padding-left: 1.5rem;
    font-size: 1.3rem;
}

.title {
    line-height: 43px;
    height: 30px;
}


.selected {
    background-color: #e7e2e2;
}

#form {
    height: 330px;
    overflow: scroll;
}

.RegisterForm {

    padding-bottom: 5rem;
}


*,
textarea,
input {
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif !important;
    font-size: 62.5%;
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    /*-webkit-touch-callout: none;*/
    font-style: normal;
    outline: none;
}


#form {
    height: 100%;
    background: #f8f8f8;
}

ul {
    margin-top: 1rem;
}

.guestInfo {
    margin-top: 1rem;
    background: #fff;
}

.guestInfo ul {}

.guestInfo ul li {
    height: 4.4rem;
    line-height: 4.4rem;
    margin: 0 3rem;
    display: flex;

    background: #fff;
    position: relative;
    left: 0;
    font-size: 1.3rem;

    border-bottom: 1px solid #f5f5f5;
}

.guestInfo li span {
    display: inline-block;
    font-size: 1.5rem;
}

.guestInfo li span.start {
    color: red;
    height: 100%;
    line-height: 100%;
    padding: 5.5% 0;
}

.guestInfo li textarea {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.3rem;
    position: absolute;
    width: 50%;
    left: 37%;
    top: 30%;
    border: 0;
    background-color: #fff;
    outline: medium;
    appearance: none;
    -webkit-appearance: none;
}

.guestInfo ul li input {
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.3rem;
    position: absolute;
    width: 50%;
    left: 37%;
    top: 30%;
    border: 0;
    background-color: #fff;
    outline: medium;
    appearance: none;
    -webkit-appearance: none;
}


.guestIn li {
    height: 4.4rem;
    line-height: 4.4rem;
    display: flex;
    padding: 0 3rem;
    background: #fff;
    position: relative;
    left: 0;
    font-size: 1.3rem;
}

.guestIn li span {
    display: inline-block;
    font-size: 1.5rem;
}

.guestIn li span.start {
    color: red;
    height: 100%;
    line-height: 100%;
    padding: 5.5% 0;
}

ul.guestIn>li input {
    display: inline-block;
    height: 1.7rem;
    font-size: 1.3rem;
    position: absolute;
    width: 50%;
    left: 40%;
    top: 30%;
    border: 0;
    background-color: #fff;
    outline: medium;
    appearance: none;
    -webkit-appearance: none;
}

ul.guestInfo>li img {
    display: inline-block;
    width: 2rem;
    height: 2.3rem;
    position: absolute;
    left: 90%;
    top: 22%;
}

ul.guestInfo:nth-child(2) li:last-child {
    border-bottom: none;
}

ul.guestInfo:nth-child(1) li:last-child {
    border-bottom: 1px solid #e0e0e0;
}

.icon {
    border: 0.15rem solid #a0a0a0;
    border-width: 0.15rem 0.15rem 0 0rem;
    display: inline-block;
    height: 0.8rem;
    width: .8rem;
    position: absolute;
    top: 35%;
    left: 44%;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(135deg);
    -webkit-transition: all .5s ease-in .1s;
    transform-origin: center center;
    transform: rotate(135deg);
    transition: all .5s ease-in .1s;
}

select {
    height: 100%;
    border: none;
    outline: medium;
    appearance: none;
    -webkit-appearance: none;
    font-size: 1.3rem;
    background: #FFFFFF;
    position: absolute;
    width: 60%;
    left: 37%;
    top: 0;
    color: #BAB8B8;
}

select option {

    font-size: 1.5rem;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif !important;
}

.sumbitBtn {
    padding: 1rem 0;
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}

.sumbitBtn button {
    width: 70%;
    display: block;
    height: 3.4rem;
    line-height: 4rem;
    margin: 0 auto;
    text-align: center;
    border: 0;
    border-radius: 4px;
    font-size: 1.6rem;
    background: #F16A61;
    color: #fff;
}



#guestNum {
    top: 28%;
}

.time {
    display: inline-block;
    height: 2.9rem;
    line-height: 2.9rem;
    font-size: 1.5rem;
    position: absolute;
    /*width: 80%;*/
    border: 1px solid #ccc;
    left: 30%;
    top: 15%;
}

.guestInfo:nth-child(1) {
    margin-top: 0;
}

.pho {

    min-height: 60px;
    background: #fff;
}
</style>
  
